<template>
   <div class="sidebar-container" :class="{ hide: !opened }" :style="{ background: isDark?'':variableObj.menuBg }">
        <Logo :opened="opened" />
        <el-menu
            :background-color="isDark?'':variableObj.menuBg"
            :text-color="isDark?'':variableObj.menuText"
            :active-text-color="variableObj.menuActiveText"
            :unique-opened="true"
            :collapse="!opened"
            :collapse-transition="false"
        >
            <SidebarItem v-for="item in router.options.routes" :route="item" :baseUrl="item.path" :key="item.name"/>
        </el-menu>
   </div>
</template>

<script setup lang='ts'>
import Logo from './Logo.vue';
import SidebarItem from './SidebarItem.vue';
import variables from '@/styles/variables.module.scss'
import { isDark } from '@/utils/dark'
import { computed, toRefs } from 'vue'
import { useRouter } from 'vue-router'
import { useApp } from '@/stores/app';

const router = useRouter()
const { opened } = toRefs(useApp())

const variableObj = computed(()=>{
    return variables
})

</script>
<style scoped>

</style>